 <template>
  <div class="app-container">
    
    <el-row :gutter="50" class="mb8">
      <el-col :sm="2" class="hidden-xs-only" style="opacity:0;">左侧占位</el-col>

      <!-- 底部页脚设置 -->
      <el-col :span="10">
        <!--  -->
        <el-card class="box-card">
          <div slot="header" class="clearfix" style="text-align: center; font-size: 25px;">
            网站底部页脚设置
          </div>
          <div style="margin-top: 10px;">
           <el-form label-position="top" ref="form" :model="form" :rules="rules" label-width="80px">

            <el-row :gutter="5">
               <el-col :span="12">
                  <el-form-item label="版权归属" prop="warner">
                    <el-input v-model="form.warner" placeholder="版权归属" />
                  </el-form-item>
                </el-col>

                <el-col :span="12">
                  <el-form-item label="网站备案号" prop="icp">
                    <el-input v-model="form.icp" placeholder="网站备案号" />
                  </el-form-item>
                </el-col>
            </el-row>
            <!-- <el-divider></el-divider> -->
             <el-row :gutter="5">
               <el-col :span="12">
                  <el-form-item label="运行时间字体大小" prop="fontSize">
                    <el-input v-model="form.fontSize" placeholder="字体大小" />
                  </el-form-item>
               </el-col>
               <el-col :span="12">
                  <el-form-item label="运行时间字体颜色" prop="fontColor">
                    <el-row :gutter="5">
                      <el-col :span="20">
                        <el-input v-model="form.fontColor" placeholder="字体颜色"></el-input>
                      </el-col>
                      <el-col :span="2">
                        <el-color-picker v-model="color" @change="colorChange" size="medium"></el-color-picker>
                      </el-col>
                    </el-row>
                  </el-form-item>
               </el-col>
             </el-row>
             <!-- <el-divider></el-divider> -->
             <el-form-item label="网站开始运行时间" prop="startTime">
                  <el-row>
                    <el-col :span="18">
                      <el-date-picker clearable size="small"
                        v-model="form.startTime"
                        type="datetime"
                        value-format="yyyy-MM-dd"
                        placeholder="选择开始时间">
                      </el-date-picker>
                    </el-col>
                    <el-col :span="6" style="text-align: right;">
                      <el-button size="small" type="primary" @click="saveBtnFooter">
                        保存配置
                      </el-button>
                    </el-col>
                  </el-row>
                </el-form-item>
            </el-form>
          </div>
        </el-card>
      </el-col>

      <!-- 侧边栏设置 -->
      <el-col :span="10">
        <el-card class="box-card">
          <div slot="header" class="clearfix" style="text-align: center;font-size: 25px;">
            侧边栏设置
          </div>
          <div style="margin-top: 10px;">
            <el-form ref="BroadsideForm" style="text-align: right;" :model="BroadsideForm" :rules="rules" label-width="150px">
                  <el-row :gutter="50" >
                    <el-col :span="12" >
                      <el-form-item label="显示站长信息">
                        <el-switch
                          v-model="BroadsideForm.showSynopsis"
                          @change="StatusChange"
                          :active-color="activeColor"
                          :inactive-color="inactiveColor"
                          active-value="Y"
                          inactive-value="N">
                        </el-switch>
                      </el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item label="显示博客分类">
                        <el-switch
                          v-model="BroadsideForm.showBlogtype"
                          @change="StatusChange"
                          :active-color="activeColor"
                          :inactive-color="inactiveColor"
                          active-value="Y"
                          inactive-value="N">
                        </el-switch>
                      </el-form-item>
                    </el-col>
                  </el-row>
                   <el-divider></el-divider>
                  <el-row :gutter="50">
                    <el-col :span="12">
                      <el-form-item label="显示博客标签">
                        <el-switch
                          v-model="BroadsideForm.showBlogtag"
                          @change="StatusChange"
                          :active-color="activeColor"
                          :inactive-color="inactiveColor"
                          active-value="Y"
                          inactive-value="N">
                        </el-switch>
                      </el-form-item>
                    </el-col>
                  <el-col :span="12">
                      <el-form-item label="显示最新推荐">
                        <el-switch
                          v-model="BroadsideForm.showRecommend"
                          @change="StatusChange"
                          :active-color="activeColor"
                          :inactive-color="inactiveColor"
                          active-value="Y"
                          inactive-value="N">
                        </el-switch>
                      </el-form-item>
                    </el-col>
                  </el-row>
                   <el-divider></el-divider>

                  <el-row :gutter="50">
                    <el-col :span="12">
                      <el-form-item label="显示友情链接">
                        <el-switch
                          v-model="BroadsideForm.showLink"
                          @change="StatusChange"
                          :active-color="activeColor"
                          :inactive-color="inactiveColor"
                          active-value="Y"
                          inactive-value="N">
                        </el-switch>
                      </el-form-item>
                    </el-col>
                  <el-col :span="12">
                      <el-form-item label="显示公告通知">
                        <el-switch
                          v-model="BroadsideForm.showNotice"
                          @change="StatusChange"
                          :active-color="activeColor"
                          :inactive-color="inactiveColor"
                          active-value="Y"
                          inactive-value="N">
                        </el-switch>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-divider></el-divider>
                  <el-row :gutter="50">
                    <el-col :span="12">
                      <el-form-item label="显示文字提示">
                        <el-switch
                          v-model="BroadsideForm.showTooltip"
                          @change="handleStatusChange"
                          :active-color="activeColor"
                          :inactive-color="inactiveColor"
                          active-value="Y"
                          inactive-value="N">
                        </el-switch>
                      </el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item label=" ">
                        <el-button size="medium" type="text" @click="saveBtnBroadside">
                        确认修改
                      </el-button>
                      </el-form-item>
                    </el-col>
                  </el-row>

                  <div v-if="isShow">
                    <el-form-item label="文字提示效果" style="text-align: left;">
                      <el-radio-group v-model="BroadsideForm.effect" size="small">
                        <el-radio-button label="dark">深色</el-radio-button>
                        <el-radio-button label="light">浅色</el-radio-button>
                      </el-radio-group>
                    </el-form-item>
                    <el-form-item label="文字提示位置" style="text-align: left;">
                      <el-radio-group v-model="BroadsideForm.placement" size="small">
                        <el-radio-button label="top">上边</el-radio-button>
                        <el-radio-button label="bottom">下边</el-radio-button>
                        <el-radio-button label="left">左边</el-radio-button>
                        <el-radio-button label="right">右边</el-radio-button>
                      </el-radio-group>
                    </el-form-item>
                  </div>
                </el-form>
          </div>
          
        </el-card>
      </el-col>

      <el-col :sm="2" class="hidden-xs-only" style="opacity:0;">右侧占位</el-col>
    </el-row>

  </div>
</template>

<script>
import { listFooter, getFooter, delFooter, addFooter, updateFooter } from "@/api/cms/footer";
import { listBroadside,updateBroadside } from "@/api/cms/broadside";

export default {
  name: "Footer",
  data() {
    return {
      // 遮罩层 broadside
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 网站页脚表格数据
      footerList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      //颜色选择器默认颜色
      color:"#4E6EF2",
      //启用颜色
      activeColor:"#13ce66",
      //停用颜色
      inactiveColor:'',
      isShow:false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      // 表单参数
      form: {},
      BroadsideForm:{
        id: null,
        showSynopsis: null,
        showBlogtype: null,
        showBlogtag: null,
        showRecommend: null,
        showLink: null,
        showNotice: null,
        showTooltip: null,
        effect: null,
        placement: null,
        showElf: null,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null
      },
      // 表单校验
     rules: {
        warner: [
          { required: true, message: "版权归属不能为空", trigger: "blur" }
        ],
        fontSize: [
          { required: true, message: "字体大小不能为空", trigger: "blur" }
        ],
        fontColor: [
          { required: true, message: "字体颜色不能为空", trigger: "blur" }
        ],
        startTime: [
          { required: true, message: "开始时间不能为空", trigger: "blur" }
        ],
      }
    };
  },
  created() {
    this.getList();
   
  },
  methods: {
    /** 查询网站页脚列表 */
    getList() {
      // this.loading = true;
      //获取页脚信息
      listFooter(this.queryParams).then(response => {
         if(response.total != 0){
          this.form = response.rows[0];
          this.currentFooterId = response.rows[0].id;
          this.color = response.rows[0].fontColor;
          // console.log(this.currentFooterId)
        }
        // this.footerList = response.rows;
        // this.total = response.total;
        // this.loading = false;
      });
      //获取侧边栏信息
      listBroadside().then(res =>{
        if(res.total != 0){
          this.BroadsideForm = res.rows[0];
          this.isShow = this.BroadsideForm.showTooltip === "Y"?true:false;
          // console.log(this.BroadsideForm)
        }
      })
     
    },
    //颜色选择
    colorChange(value){
      this.form.fontColor = value;
      console.log(this.form.fontColor)
    },
    //保存页脚配置
    saveBtnFooter(){
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.id != null) {
            updateFooter(this.form).then(response => {
              this.$modal.msgSuccess("配置保存成功");
              this.getList();
            });
          } 
        }
      });
    },
    //文字提示设置
    handleStatusChange(){
      this.isShow = !this.isShow;
    },
    //侧边栏显示
    StatusChange(value){
      let text = value === "Y"?"显示":"隐藏";
      this.$refs["BroadsideForm"].validate(valid => {
        if (valid) {
          if (this.BroadsideForm.id != null) {
            updateBroadside(this.BroadsideForm).then(response => {
              this.$modal.msgSuccess(text+"成功");
              this.getList();
            });
          } 
        }
      });
    },
    saveBtnBroadside(){
      this.$refs["BroadsideForm"].validate(valid => {
        if (valid) {
          if (this.BroadsideForm.id != null) {
            updateBroadside(this.BroadsideForm).then(response => {
              this.$modal.msgSuccess("设置成功");
              this.getList();
            });
          } 
        }
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        warner: null,
        icp: null,
        fontSize: null,
        fontColor: null,
        startTime: null,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length!==1
      this.multiple = !selection.length
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "添加网站页脚";
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const id = row.id || this.ids
      getFooter(id).then(response => {
        this.form = response.data;
        this.open = true;
        this.title = "修改网站页脚";
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.id != null) {
            updateFooter(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            addFooter(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids;
      this.$modal.confirm('是否确认删除网站页脚编号为"' + ids + '"的数据项？').then(function() {
        return delFooter(ids);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {});
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download('cms/footer/export', {
        ...this.queryParams
      }, `footer_${new Date().getTime()}.xlsx`)
    }
  }
};
</script>
